<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="echarts.min.js"></script>
    <title></title>
</head>
<body>
<div id="chart" style="width:100%;height:100%"></div>

<script>
    var chart;
    var longPressTimer;
    var longPressDuration = 500;

        function initChart(xData, yData) {
        chart = echarts.init(document.getElementById('chart'));

        chart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    const formattedValue = parseFloat(params.value[1]).toFixed(2)+'%';
                    return `PER:${formattedValue}&nbsp;&nbsp;&nbsp;&nbsp;${params.name}`;
                }
            },
            xAxis: {
                type: 'category',
                data: xData,
                axisLabel: { rotate: 90, color: '#FFFFFF', interval: 0 },
                axisLine: {
                    show: true,          // 强制显示轴线
                    lineStyle: {
                        color: '#FFFFFF',// 轴线颜色
                        width: 1         // 轴线宽度
                    }
                }
            },
            yAxis: {
                    type: 'value' ,
                    max:100,
                    min:0,
                    interval: 10,
                    axisLabel: {  color: '#FFFFFF',
                        formatter: function(value) {
                            return value + '%';  // 保留两位小数并添加百分号
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            width: 1
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.2)'  // 网格线颜色（半透明白色）
                        }
                    }
                },
            series: [{
                data: yData.map((v,i) => ({
                    value: [i, v],  // 使用索引对应x轴文字
                    name: xData[i]
                })),
                type: 'scatter',
                symbolSize: 8,
                itemStyle: {
                    color: '#F4CB43',
<!--                    borderColor: '#fff',-->
<!--                    borderWidth: 1-->
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        });

<!--        chart.on('click', function(params) {-->
<!--            if(window.ChartEventHandler) {-->
<!--                ChartEventHandler.onEvent('click', JSON.stringify({-->
<!--                    name: params.name,-->
<!--                    value: params.value,-->
<!--                    seriesName: params.seriesName-->
<!--                }));-->
<!--            }-->
<!--        });-->

<!--        chart.getZr().on('mousedown', function(params) {-->
<!--            longPressTimer = setTimeout(function() {-->
<!--                var pointInPixel = [params.offsetX, params.offsetY];-->
<!--                if(chart.containPixel('grid', pointInPixel)) {-->
<!--                    var pointInGrid = chart.convertFromPixel('grid', pointInPixel);-->
<!--                    var dataIndex = Math.round(pointInGrid[0]);-->
<!--                    if(window.ChartEventHandler) {-->
<!--                        ChartEventHandler.onEvent('longpress', JSON.stringify({-->
<!--                            dataIndex: dataIndex,-->
<!--                            x: xData[dataIndex],-->
<!--                            y: pointInGrid[1]-->
<!--                        }));-->
<!--                    }-->
<!--                }-->
<!--            }, longPressDuration);-->
<!--        });-->

<!--        chart.getZr().on('mouseup', function() {-->
<!--            clearTimeout(longPressTimer);-->
<!--        });-->
    }

    function updateChart(newXData, newYData) {
        if(newXData && newYData && chart && !chart.isDisposed()) {
            chart.setOption({
                xAxis: { data: newXData },
                series: [{
                    data: newYData.map((v,i) => ({
                        value: [i, v],  // 使用索引对应x轴文字
                        name: newXData[i]
                    })),
                }]
            });
        }
    }

<!--    document.addEventListener('DOMContentLoaded', function() {-->
<!--        initChart(-->
<!--            [10, 20, 30, 40, 50, 60, 70],-->
<!--            [120, 200, 150, 80, 70, 110, 130]-->
<!--        );-->
<!--    });-->
</script>
</body>
</html>
